<template>
  <div class="shopCategoryIndex">
     <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<!-- Cart卡片视图 -->
<el-card class="box-card">
  <div>
    <el-row>
  <el-button type="primary" @click="addSubtotal">添加分类</el-button>
</el-row>
<!-- 表格 -->
      <tree-table
        :data="cateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
      >
      <!-- 是否有效 -->
        <template v-slot:isok="scope">
          <i
            class="el-icon-success"
            style="color: lightgreen"
            v-if="scope.row.cat_deleted === false"
          ></i>
          <i class="el-icon-error" style="color: red" v-else></i
        ></template>
        <!-- 排序 -->
         <template v-slot:sort="scope">
           <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
           <el-tag type="success" v-else-if="scope.row.cat_level==1">二级</el-tag>
           <el-tag type="warning" v-else-if="scope.row.cat_level==2">三级</el-tag>
         </template>
         <!-- 操作 -->
           <template v-slot:operation="scope">
           <el-button @click="Redact(scope.row)" type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
          <el-button @click="deleteShop(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
         </template>
      </tree-table>

<!-- 分页 -->
 <el-pagination
      @size-change="shopSizeChange"
      @current-change="shopCurrentChange"
      :page-size='requestObj.pagesize'
      :page-sizes="[3, 5, 8, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 添加分类 -->
    <el-dialog
    @close="closeInitial"
  title="添加分类"
  :visible.sync="shopVisible"
  width="50%"
  >
  <el-form :model="shopRuleForm" status-icon :rules="rules" ref="shopRuleForm" label-width="70px">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input type="text" v-model="shopRuleForm.cat_name"></el-input>
  </el-form-item>
  <!-- 父级分类 -->
  <el-form-item label="父级分类">
    <el-cascader
    expand-trigger= 'hover'
    v-model="selectOption"
    :options="parentCategoryData"
    :props="cascaderProps"
    change-on-select
    clearable
    @change="shopHandleChange">
    </el-cascader>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="shopVisible = false">取 消</el-button>
    <el-button type="primary" @click="clickGoods">确 定</el-button>
  </span>
</el-dialog>
   <!-- 编辑分类 -->
    <el-dialog
  title="编辑分类"
  :visible.sync="shopRedact"
  width="50%"
  >
  <el-form :model="shopRedactRuleForm" status-icon :rules="rules" ref="shopRedactRuleForm" label-width="70px">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input type="text" v-model="shopRedactRuleForm.cat_name"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="shopRedact = false">取 消</el-button>
    <el-button type="primary" @click="clickRedact">确 定</el-button>
  </span>
</el-dialog>
  </div>
</el-card>
  </div>
</template>

<script>
import {getCategories,postCategories,deleteCategoriesId,putCategoriesId} from '@/api/shopManage'
export default {
  name:'shopCategoryIndex',
  data() {
    return {
      cateList:[],//分类数据
      //   treeTable
    columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          // 表示将当前列定义为模板列
          type: 'template',
          // 表示当前这一列的模板名称
          template: 'isok'
        },
         {
          label: '排序',
          prop: 'cat_level',
          type:'template',
          template:'sort'
        },
         {
          label: '操作',
          type:'template',
          template:'operation'

        },
      ],
      requestObj:{
        type:3,
        pagenum:1,
        pagesize:3
      },
      total:0,// 总数据
      shopVisible:false,//添加分类弹出框
      rules:{
         cat_name:[
           { required: true, message: '请输入分类名称', trigger: 'blur' },
         ]
      },
      shopRuleForm:{
        cat_name:'',
        cat_pid:0,
        cat_level:0
      },
      parentCategoryData:[],//父级分类数据
      // 级联选择
      cascaderProps:{
        value:'cat_id',
        label:'cat_name',
        children:'children'
      },
      selectOption:[],//下拉框绑定值
      shopRedact:false,//商品编辑
      // 编辑提交
      shopRedactRuleForm:{
        cat_id:0,
        cat_name:''
      }
    }
  },
  created(){
    this.goodsData()
  },
  methods:{
    // 获取商品分类数据
    async goodsData(){
      let {data} = await getCategories(this.requestObj)
      this.cateList = data.data.result;
      this.total=data.data.total
    },
    //pageSize改变时触发
    shopSizeChange(val){
      this.requestObj.pagesize=val;
      this.goodsData()
    },
    //currentPage 改变时会触发
    shopCurrentChange(val){
       this.requestObj.pagenum = val;
        this.goodsData()
    },
    // 添加分类
    addSubtotal(){
      this.parentCategory()
      this.shopVisible=true
    },
    // 添加分类，父级分类
   async parentCategory(){
     let {data} = await getCategories({
       type:2
     })
     if(data.meta.status !==200)return this.$message.error(data.mete.msg)
     this.parentCategoryData=data.data;
    },
    //选中时的值
     shopHandleChange() {
        console.log(this.shopRuleForm);
        console.log(this.selectOption, '')
        if(this.selectOption.length>0){
          this.shopRuleForm.cat_pid = this.selectOption[
            this.selectOption.length-1
          ]
          this.shopRuleForm.cat_level = this.selectOption.length
          return
        }else{
           this.shopRuleForm.cat_pid = 0
          this.shopRuleForm.cat_level = 0
        }

      },
       //添加分类提交
    async clickGoods(){
        let {data} = await postCategories(this.shopRuleForm);
        if(data.meta.status !==201)return this.$message.error(data.meta.msg)
        this.$message.success(data.meta.msg);
        this.goodsData()
        this.shopVisible=false
    },
    // 打开添加分类弹出框时清除分类名称和父级分类数据
    closeInitial(){
       this.$refs.shopRuleForm.resetFields();
       this.selectOption=[]
    },
    // 删除数据
    async deleteShop(shopId){
       const res = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(res !== 'confirm')return this.$message.info('取消了删除')
        let {data} = await deleteCategoriesId(shopId.cat_id);
        console.log(data, '')
        if(data.meta.status !==200)return this.$message.error(data.meta.msg)
        this.goodsData()
        this.$message.success(data.meta.msg)
    },
    // 商品编辑
    Redact(amend){
      this.shopRedact=true;
      this.shopRedactRuleForm.cat_id=amend.cat_id;
      this.shopRedactRuleForm.cat_name=amend.cat_name
    },
    // 商品编辑提交
   async clickRedact(){
 let {data} = await putCategoriesId(this.shopRedactRuleForm.cat_id,{
       cat_name:this.shopRedactRuleForm.cat_name
     })
     console.log(data, '')
     if(data.meta.status !==200)return this.$message.msg(data.meta.msg)
     this.shopRedact=false;
     this.$message.success(data.meta.msg);
     this.goodsData()
    }
  }
}
</script>

<style lang="less" scoped>
.shopCategoryIndex{
 .el-cascader{
   width: 100%;
 }
 }
</style>
